<%--
  Created by IntelliJ IDEA.
  User: Feilong
  Date: 2018/8/12
  Time: 22:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript" src="dist/jquery/jquery-1.8.3.js"></script>
<head>
    <title>书籍智能查询</title>
    <style type="text/css">
        #id-form-center{
            padding: 20px 40%;
        }
        #id-table-center{
            padding: 20px 30%;
        }
    </style>
</head>
<body>
<%--<-center">
    <s:form action="queryBook" method="POST">
        <s:textfield name="keywords" />
        <s:radio name="radioValue"
                 list="#{'bname':'书籍名11','bauthor':'作者22','bpress':'出版社33'}" listKey="key" listValue="value"/>
        <s:submit type="input" value="查询" name=""/>
        <s:reset value="重置"/>
    </s:form>
</div>--%>
<hr>
<div id="id-form-center">
    <form name="queryBook" method="post">
        <input type="text" name="keywords"><br>
        <input type="radio" name="radioValue" value="queryByBname" onclick="click2RadioValue('queryByBname')">书籍名1
        <input type="radio" name="radioValue" value="queryByBauthor" onclick="click2RadioValue('queryByBauthor')">作者2
        <input type="radio" name="radioValue" value="queryByBpress" onclick="click2RadioValue('queryByBpress')">出版社3<br>
        <input type="reset" value="重置"><br>
        <input type="button" value="新增">
    </form>
</div>
<hr>
<div id="id-table-center">
        <table id="id-table-queryResult" border="1">
            <tr id="id-th-title">
                <th>ID</th>
                <th>ISBN</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>价格</th>
                <th>库存</th>
                <th>图片名称</th>
                <th>图片预览</th>
                <th>操作</th>
            </tr>
        </table>

</div>
<hr>
<div id="id-div-updateBook">
    <form action="updateBook" method="post">
        ID:<input type="text" name="bid" value="222222" readonly="readonly"><br>
        ISBN:<input type="text" name="bisbn" ><br>
        书名:<input type="text" name="bname" ><br>
        作者:<input type="text" name="bauthor" ><br>
        出版社:<input type="text" name="bpress" ><br>
        价格:<input type="text" name="bprice" ><br>
        库存:<input type="text" name="bcount" ><br><hr>
        <div id="id-div-update-file">
            <input type="button" value="替换图片"><hr>
            上传图片<input type="upload"><hr>
            图片:<input type="text" name="bpic" ><br><hr>
            图片预览:<img alt="图片加载失败" ><hr>
        </div>

        <input type="submit" value="更新">
    </form>
</div>
<hr>
</body>
</html>
<script type="text/javascript">
    var i=0;
    var tr2str='';
    var id2update='';
    var id2delete='';
    function click2RadioValue(value){
        $("input[name=radioValue]").attr('value',value);
    }

    $(function () {

        $("input[name=radioValue]").click(function () {
            /*console.log('$("input[name=radioValue]").val()====='+$("input[name=radioValue]").val());
            console.log('$("input[name=keywords]").val()===='+$("input[name=keywords]").val());*/
            $.ajax({
                type:'post',
                url:'queryBook_'+$("input[name=radioValue]").val()+'.action',
                data:{
                    radioValue:$("input[name=radioValue]").val(),
                    keywords:$("input[name=keywords]").val(),
                },
                dataType:'json',
                success:function (data) {
                    tr2str='';
                    $.each(data.list,function (index,obj) {
                        i=i+1;
                        tr2str+='<tr class="cla-tr-bookInfo">';
                        tr2str+='<td>'+obj.bid+'</td>';
                        tr2str+='<td>'+obj.bisbn+'</td>';
                        tr2str+='<td>'+obj.bname+'</td>';
                        tr2str+='<td>'+obj.bauthor+'</td>';
                        tr2str+='<td>'+obj.bpress+'</td>';
                        tr2str+='<td>'+obj.bprice+'</td>';
                        tr2str+='<td>'+obj.bcount+'</td>';
                        tr2str+='<td>'+obj.bpic+'</td>';
                        tr2str+='<td><img src="bookPic/'+obj.bpic+'" alt="图片加载失败" width="100px" height="50px" ></td>';
                        id2update='id-input-update_'+obj.bid;
                        id2delete='id-input-delete_'+obj.bid;
                        tr2str+='<td><input type="button" value="修改" id="'+id2update+'" onclick="click2update('+obj.bid+')"><input type="button" value="删除" id="'+id2delete+'" onclick="click2delete('+obj.bid+')"></td>';
                        tr2str+='</tr>';

                    });//$.each()结束
                    /*console.log('==第 '+i+' 次 索引='+'tr2str======'+tr2str);
                    console.log('==第 '+i+' 次 索引='+'tr2str======'+id2update);
                    console.log('==第 '+i+' 次 索引='+'tr2str======'+id2delete);*/

                    if ($(".cla-tr-bookInfo")!=null){
                        $(".cla-tr-bookInfo").remove();
                    }
                    $("#id-th-title").after(tr2str);


                }//success结束
            });//$.ajax()结束
        });//$("input[name=radioValue]").click()结束



    });//$()结束
    $("#id-div-updateBook").hide();
    function click2update(bid1){
        $.ajax({
            type:'post',
            url:'searchBook.action',
            data:{
                bid:bid1
            },
            dataType:'json',
            success:function (book1) {
                console.log(book1);

                $("#id-div-updateBook").show();

                $("#id-div-updateBook input[name=bid]").attr('value',book1.bid);
                $("#id-div-updateBook input[name=bisbn]").attr('value',book1.bisbn);
                $("#id-div-updateBook input[name=bname]").attr('value',book1.bname);
                $("#id-div-updateBook input[name=bauthor]").attr('value',book1.bauthor);
                $("#id-div-updateBook input[name=bpress]").attr('value',book1.bpress);
                $("#id-div-updateBook input[name=bprice]").attr('value',book1.bprice);
                $("#id-div-updateBook input[name=bcount]").attr('value',book1.bcount);
                $("#id-div-updateBook input[name=bpic]").attr('value',book1.bpic);
                $("#id-div-updateBook img").attr({src:'bookPic/'+book1.bpic,width:"120px" ,height:"60px"});

            }
        });

    }


    function click2delete(bid11){
        console.log('bbbbb');
        console.log("bid11====="+bid11);
        $.ajax({
            type:'post',
            url:'deleteBook.action',
            data:{
                bid:bid11
            },
            dataType:'text',
            success:function(msg){
                    alert('删除成功');
                    $("form[name=queryBook]").action='queryBook_queryByBname.action';
                    $("form[name=queryBook]").submit();
                    /*queryBook.action='queryBook_queryByBname.action';
                    queryBook.submit();*/

            }
        });

    }


</script>
